<template>
  <div>
      <h4>学生信息一览</h4>
      <table border="1" cellspacing="0" width="600">
          <thead><tr><th>学号</th><th>姓名</th><th>性别</th><th>成绩</th><th>操作</th></tr></thead>

          <tbody>
              <tr v-for="(s,index) in cutBean.list" :key="s.id">
                  <td>{{s.id}}</td>
                  <td>{{s.name}}</td>
                  <td>{{s.sex}}</td>
                  <td>{{s.grade}}</td>
                  <td>
                      <input type="button" value="删除" @click="del(index)"/>
                      <input type="button" value="修改" @click="findById(s)"/>
                  </td>
              </tr>
          </tbody>
      </table>

      <a v-for="n in cutBean.pages" :key="n" style="margin-left:10px"
       href="javascript:void(0)" @click="pageClick(n)">{{n}}</a>
  </div>
</template>

<script>
export default {
    props:["cutBean"],
    methods:{
        pageClick(pageNO){
            // alert(pageNO);
            //触发speak事件，并传递参数
            this.$emit("sp",pageNO);
        },
        del(index){
            this.cutBean.list.splice(index,1);
        },
        findById(s){
            this.$emit("findById",s);
        }
    }
}
</script>

<style>

</style>